<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        html{
            font-size:62.5%;
        }
        .reserve{
            text-align: right;
            padding:1rem;
            position: static;
        }
        .reserve a{
            font-size: 1.8rem;
            font-weight: 300;
        }
        .data_list{
            border-right:1px solid #F4F4F4;
            color: #222222;
        }
        .data_list p{
            font-size: 1.2rem;
            margin: 0;
            width:5.9rem;
        }
        .data_list p:first-child{

            font-size: 1.8rem;
        }
        .swiper-slide{
            width:7.5rem;
        }

        .data_list{
            padding:1rem 1.5rem;
        }
        .data_list:hover{
            background: #CBA162;
            color:#fff;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="buffet">
        <div>
            <h4>西餐自助晚餐</h4>
            <p>17:00-20:30</p>
            <p class="black">￥ <span style="font-size: 3rem">150</span>/位 <s>原价￥228</s></p>
        </div>
    </div>
    <div style="">
        <ul class="list-group">
            <li class="list-group-item linkman">
                <p class="linkmanp"><img src="img/line_left.gif" width=65 height=7 alt=""/><span>用餐日期</span><img src="img/line_right.gif" width=65 height=7 alt=""/></p>
            </li>
            <li class="list-group-item " style="padding:0">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">1</div>
                        <div class="swiper-slide">2</div>
                        <div class="swiper-slide">3</div>
                        <div class="swiper-slide">4</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                        <div class="swiper-slide">5</div>
                    </div>
                    <!-- Add Pagination -->
                </div>
            </li>
            <li class="list-group-item linkman">
                <p class="linkmanp"><img src="img/line_left.gif" width=65 height=7 alt=""/><span>用餐人数</span><img src="img/line_right.gif" width=65 height=7 alt=""/></p>
            </li>
            <li class="list-group-item ">
                <div class="middle">
                    <span>就餐人数</span>

                    <div class="rt">
                        <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                        <span class="number">1</span>
                        <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                    </div>
                </div>
            </li>
            <li class="list-group-item linkman">
                <p class="linkmanp"><img src="img/line_left.gif" width=65 height=7 alt=""/><span>联系人方式</span><img src="img/line_right.gif" width=65 height=7 alt=""/></p>
            </li>
            <li class="list-group-item ">
                <div class="input-group">

                    <input type="text" class="form-control" placeholder="姓名" aria-describedby="basic-addon1">
                </div>
            </li>
            <li class="list-group-item ">
                <div class="input-group">

                    <input type="text" class="form-control" placeholder="手机号" aria-describedby="basic-addon1">
                </div>
            </li>
            <li class="list-group-item linkman">
                <p class="linkmanp"><img src="img/line_left.gif" width=65 height=7 alt=""/><span>支付方式</span><img src="img/line_right.gif" width=65 height=7 alt=""/></p>
            </li>
            <li class="list-group-item Pay">
                <img  src="img/zhifubao.png" alt=""/><p>支付宝支付</p><b></b>
            </li>
            <li class="list-group-item Pay">
                <img  src="img/weixin.png" alt=""/><p>微信支付 </p><b><img src="img/dagou.png" alt=""/></b>
            </li>
            <li class="list-group-item  Pay">
                <img src="" alt=""/><p>储值卡支付</p><b></b>
            </li>
        </ul>
    </div>
    <div class="reserve">
        <a href="#"><span style="font-size: 1.2rem;font-weight: 300;float: left;position: relative;top: 5px;">餐费合计:</span><span class="price" style="float: left">￥150</span><span style="margin-right: 2rem"> 提交订单</span></a>
    </div>

</div>



<script src="js/bootstrap.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>

<!-- Initialize Swiper -->

<script>
    $('.reserve a').click(function(){
        $('html').append('<div class="dwo" style="background:#313131;opacity: 0.8"><p style="position: absolute;top:50%;left: 50%;color:#fff;font-size: 1.8rem;padding:1.5rem 3rem;background: #000;margin-left: -7.2rem;margin-top: -2.85rem">预定成功</p></div>')
    })
    $(function(){
        function show(){
            var mydate = new Date();
            var week="";
            var str = "";
            for(var i=0;i<20;i++){
                var a=(mydate.getDay()+i)%7;
                if(a==0){week="周日"}else
                if(a==1){week="周一"}else
                if(a==2){week="周二"}else
                if(a==3){week="周三"}else
                if(a==4){week="周四"}else
                if(a==5){week="周五"}else
                if(a==6){week="周六"};
                var b=mydate.getMonth();
                var c=mydate.getDate();
                var d=mydate.getYear();
                var day= new Date(d,b+2,0);
                var daycount =day.getDate();
                if(c+i>daycount){
                    b=b+1;
                    c=c+i-daycount;
                    str+=('<div class="swiper-slide data_list"><p>'+(b+1)+'-'+c+'</p><p>'+week+'</p></div>');
                }else{
                    c=c+i;
                    if(i==0){
                        str+=('<div class="swiper-slide data_list"><p>'+'今天'+'</p><p>'+(b+1)+'-'+c+'</p></div>');
                    }else if(i==1){
                        str+=('<div class="swiper-slide data_list"><p>'+'明天'+'</p><p>'+(b+1)+'-'+c+'</p></div>');
                    }else if(i==2){
                        str+=('<div class="swiper-slide data_list"><p>'+'后天'+'</p><p>'+(b+1)+'-'+c+'</p></div>');
                    }else{
                        str+=('<div class="swiper-slide data_list"><p>'+(b+1)+'-'+c+'</p><p>'+week+'</p></div>');
                    }
                }

            }

            return str;
        }
            $(".swiper-wrapper").html("");
            $(".swiper-wrapper").html(show());

    });
    $('.btn_sub').click(function(){
        var a= $(this).next().html();
        if(a>=1){
            $(this).next().html(a-1);
        }else{
            $(this).next().html();
        }
        var b = $(this).next().html();
        $('.price').html("￥"+b*150);
    })
    $('.btn_add').click(function(){
        var a = $(this).prev().html();
        $(this).prev().html(a-0+1);
        var b = $(this).prev().html();
        $('.price').html("￥"+(b*150));
    })
    $('.Pay').click(function(){
        $('.Pay').find('b').empty();
        $(this).find('b').append('<img src="img/dagou.png" alt=""/>');
    })

</script>
<script>
    var swiper = new Swiper('.swiper-container', {
        direction : 'horizontal',
        slidesPerView : 1
    });
</script>


</body>
</html>